<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <!--侧边导航栏区域-->
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
      theme="light"
    >
      <div class="logo"></div>
      <a-menu theme="light" mode="inline">
        <a-sub-menu v-for="(item) in menuList" :key="item.id">
          <span slot="title"><icon-font :type="menuObj[item.id]" /><span>{{item.authName}}</span></span>
          <a-menu-item v-for="(item1) in item.children" :key="item1.id" @click="addPath(`/${item1.path}`)">
            <icon-font :type="submenuObj[item1.id]" /><span>{{item1.authName}}</span>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!--顶部导航栏区域-->
      <a-layout-header style="background: #fff; padding: 0">
        <!--侧边栏开关-->
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
        <!--个人中心下拉菜单-->
        <div>
          <a-dropdown :trigger="['hover']">
            <div class="usernameInfo">
              <a-avatar style="backgroundColor:#87d068" icon="user" class="ant-dropdown-link">
              </a-avatar>
              <span class="username">Hello {{username}}</span>
            </div>
            <a-menu slot="overlay">
              <a-menu-item key="0">
                <a>个人中心</a>
              </a-menu-item>
              <a-menu-divider></a-menu-divider>
              <a-menu-item key="1">
                <a @click="logout">注销</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <!--内容区-->
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1412063_030xfq2nb6x9.js'
})
export default {
  components: {
    IconFont
  },
  created () {
    this.username = localStorage.getItem('user')
    this.getMenuList()
  },
  data () {
    return {
      // 菜单栏折叠
      collapsed: false,
      // 从localStorage获取的用户名
      username: '',
      // 菜单栏列表
      menuList: [],
      // 一级菜单字体图标
      menuObj: {
        '125': 'icon-yonghuguanli',
        '103': 'icon-quanxianguanli',
        '101': 'icon-shangpinguanli',
        '102': 'icon-dingdanguanli',
        '145': 'icon-icon-test'
      },
      // 二级菜单字体图标
      submenuObj: {
        '110': 'icon-yonghuliebiao',
        '111': 'icon-jiaoseliebiao',
        '112': 'icon-quanxianliebiao',
        '104': 'icon-shangpinliebiao',
        '115': 'icon-icon',
        '121': 'icon-shangpinfenlei',
        '107': 'icon-dingdanliebiao',
        '146': 'icon-shujubaobiao'
      }
    }
  },
  methods: {
    logout () {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
      this.$message.success('已成功注销')
    },
    async getMenuList () {
      let res = await this.$http.get(`menus`)
      // console.log(res)
      if (res.data.meta.status !== 200) {
        return this.$message.error(res.data.meta.msg)
      }
      this.$message.success(res.data.meta.msg)
      this.menuList = res.data.data
      // console.log(this.menuList)
    },
    addPath (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}
#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
.ant-layout-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.ant-layout-content {
  background-color: #eee;
}
.ant-dropdown-link {
  margin-right: 10px;
}
.usernameInfo {
  margin-right: 90px;
  width: 120px;
}
.ant-menu {
  padding: 0 0 60px 0
}
</style>
